<template>
    <ElTable :data="data" @row-click="handleClick">
        <template v-for="item in options" :key="item.field">
            <ElTableColumn v-if="item.field === 'selection'" type="selection" :label="item.label ? item.label : '选择'"
                :width="item.width"></ElTableColumn>
            <ElTableColumn v-else-if="item.field === 'index'" type="index" :label="item.label ? item.label : '序号'"
                :width="item.width"></ElTableColumn>
            <template v-else-if="item.slots">
                <ElTableColumn :label="item.label ? item.label : item.field">
                    <template #default>
                        <div v-html="item.slots()"></div>
                    </template>
                </ElTableColumn>
            </template>
            <ElTableColumn v-else :prop="item.field" :label="item.label ? item.label : item.field" :width="item.width">
            </ElTableColumn>
        </template>
    </ElTable>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
import { ElTable, ElTableColumn } from "element-plus";
import { ElButton } from "element-plus";
const props = defineProps({
    data: { type: Array, default: () => [] },
    options: { type: Array, default: () => [] },
});
const emit = defineEmits(["curronRow"]);
function handleClick(row) {
    // console.log(row)
    emit("curronRow", row);
}
</script>
  